<template>
  <el-dialog width='80%' style='margin-top: 2vh' v-model='dialogFormVisible' title='关联设备列表' @open='open'>
    <avue-crud
      v-model='form'
      ref='crud'
      :page='page'
      :data='tableData'
      :table-loading='tableLoading'
      :option='tableOption'
      :before-open='handleOpenBefore'
      @search-change='searchChange'
      @refresh-change='refreshChange'
      @size-change='sizeChange'
      @current-change='currentChange'
      @selection-change='selectionChange'
    >
    </avue-crud>
    <div class='btn-box'>
      <el-button @click='handelClick' type='primary'>确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { fetchaccessDeviceList } from '/@/api/check/omicheckequipment'

export default {
  name: 'equipment',
  data() {
    return {
      selectList:[],
      dialogFormVisible: false,
      tableData: [],
      form: {},
      tableLoading: false,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableOption: {
        border: true,
        stripe: true,
        menu: false,
        addBtn: false,
        align: 'center',
        index: true,
        indexLabel: '序号',
        searchMenuSpan: 5,
        labelWidth: '160',
        indexWidth: '60',
        selection: true,
        reserveSelection: true,
        rowKey: 'deviceNo',
        columnBtn: false,
        header: false,
        column: [

          {
            label: '设备ID',
            prop: 'unitNo',
            // width: 280
          },

          {
            type: 'input',
            label: '设备名称',
            prop: 'deviceName',
            width: 300,
            overHidden: true
          },

          {
            type: 'input',
            label: '所属产品',
            prop: 'productName',
            width: 300,
            overHidden: true
          },

          {
            type: 'select',
            label: '在线状态',
            formatter: (val) => {
              return val.onlineStatus === 0 ? '离线' : '在线'
            },
            prop: 'onlineStatus',
            width: 110
          },
          // {
          //   // label: '工作状态，0-关机 1-开机 2-故障',
          //   label: '工作状态',
          //   formatter: (val) => {
          //     return val.workingStatus === 0 ? '关机' : val.employStatus === 1 ? '开机' : '故障'
          //   },
          //   prop: 'workingStatus',
          //   width: 110

          // },
          {
            type: 'input',
            label: '创建时间',
            prop: 'createTime',
            width: 170
          }

        ]
      }
    }
  },
  created() {
  },
  props: ['data'],
  watch: {
    tableData: {
      handler(val) {
      },
      deep: true
    }
  },
  computed: {},
  methods: {
    open(){
      this.getList(this.page,this.data)
    },
    handelClick() {
      let ids = []
      this.selectList.forEach((data) => {
        ids.push(data.unitNo)
      })
      let names = []
      this.selectList.forEach((data) => {
        names.push(data.deviceName)
      })
      this.$emit('getIds', ids, names, this.selectList)
      this.dialogFormVisible = false
    },
    // 全选按钮
    selectionChange(list) {
      this.selectList = list
    },
    // 获取表格数据
    getList(page, params) {
      this.tableLoading = true
      fetchaccessDeviceList(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize,
            productKey: params.devType
          },
          // params
        )
      )
        .then((response) => {
          this.tableData = response.data.records
          this.page.total = response.data.total
          this.tableLoading = false

        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    // 分页大小
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.getList(this.page,this.data)
    },
    // 改变页数
    currentChange(current) {
      this.page.currentPage = current
      this.getList(this.page,this.data)
    },
    // 点击搜索
    searchChange(form, done) {
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },
    // 刷新表格
    refreshChange() {
      this.getList(this.page, this.data)
    },
    // 打开前回调
    handleOpenBefore(show, type) {
      show()
    }
  }
}
</script>

<style lang='scss' scoped>
.btn-box {
  display: flex;
  justify-content: flex-end;
}
</style>